<template>
	<view class="detail">
		<view class="detail-header">
			<article-item ref="article-item" :index = "this.replyIdx" :item="info" type="images" :isDetail="true" @getTopicInfo="getTopicInfo">
			</article-item>
		</view>
		<view v-if="isPlay">
			<video :id="'video'+videoIdx" class="article-video_item" :src="vodSrc"
				:autoplay="autoplay" @fullscreenchange="fullscreenchange"
				v-show="isPlay" />
		</view>
		<!--评论的界面显示开始-->
		<view class="detail-comment">
			<!--评论上方导航栏开始-->
			<view class="detail-comment_header u-flex u-row-between u-border-bottom">
				<view class="comment-header_title u-flex">
					<image class="comment-header_title--icon" src="/static/images/home/icon-shequ.png"
						mode="scaleToFill" />
					<view class="comment-header_title--label">{{$t('mine.comment')}}
					<text class="comment-header_title--sum">({{info.Replies}})</text>
					</view>
				</view>
				<view class="comment-header_action" @click="actArticleComment(info.Tid)">{{$t('mine.input_comment')}}</view>
			</view>
			<!--评论上方导航栏结束-->
			<!--评论的内容开始-->
			<template v-for="(item,index) in replies">		
				<view class="u-border-bottom">
					<view class="detail-comment_item u-flex u-col-top">
						<!--评论的头像开始-->
						<view class="comment-item_avatar" @click="go2User(item.AddAcc)">
							<u-image v-if="item.UserAvatar" width="60rpx" height="60rpx" border-radius="60rpx"
								:src="item.UserAvatar"></u-image>
							<u-image v-else width="60rpx" height="60rpx" border-radius="60rpx"
								src="/static/images/avatar.jpg"></u-image>
						</view>
						<!--评论的头像结束-->					
						<view class="comment-item_content u-flex-1">
							<view class="item-content_header u-flex u-row-between u-col-top">
								<!--评论的姓名开始-->
								<view class="item-content_header--left">
									<view class="item-content_header--name" @click="go2User(item.AddAcc)">{{item.UserName}}</view>								
								</view>
								<!--评论的姓名结束-->								
							</view>
							<!--评论的内容开始-->	
							<rich-text class="item-content_text u-font-28" :nodes="item.Content"></rich-text>
							<!--评论的内容结束-->	
							<!--评论的视频开始-->
							<view class="article-video" v-if="item.VodSrc != ''" @click.stop="actVideoPlay(index, item.VodSrc)">
								<image class="article-video_img" mode="aspectFit" :src="item.VodImg"></image>
								<view class="article-video_play" v-if="!isPlay">
									<image class="article-video_play--icon" src="/static/images/home/play.png" mode="scaleToFill" />
								</view>
							</view>
							<!--评论的视频结束-->
							<!--评论的图片开始-->
							<view class="article-images" v-if="item.ImgPackJson != ''">
								<template v-for="(img, index) in item.ImgPackJson">
										<u-image class="u-m-r-10" width="200" :src="img.Src" mode="widthFix" @click="actPreviewImage(item.ImgPackJson,index)"></u-image>
								</template>
							</view>
							<!-- 文件 -->
							<view class="article-annex" v-if="item.AttPackJson != ''">
								<template v-for="(item2,index2) in item.AttPackJson">
									<preview-pdf :item="item2" :index="index2"></preview-pdf>
								</template>
							</view>
							<!--评论的图片结束-->
							<text class="article-content_friends" v-if="item.FriendAccName">{{item.FriendAccName}}</text>
						</view>							
					</view>
					<view class="article-handle u-flex u-m-l-50" style="margin-top: 5rpx;">
						<!--评论的日期开始-->
						<view class="item-content-time u-m-l-20">{{ item.AddTimeText }}</view>	
						<!--评论的日期结束-->
						<!--评论的评论按钮开始-->
						<view class="article-handle_item u-flex u-row-center" style="margin-left: 14rpx" @click.stop="actArticleComment(item.Topic,item.Rid)">
							<text class="icon icon-pinglun article-handle_item--icon"></text>
							<text class="article-handle_item--text">{{item.Replies}}</text>
						</view>		
						<!--评论的评论按钮结束-->	
						<!--评论的删除按钮开始-->
						<view class="item-content_header--right" v-if="item.AddAcc == $store.state.vuex_user.uid" style="margin-left: 14rpx">
							<text class="icon icon-shanchu article-handle_item--icon" @click="actDeleteReplyShow(item.Rid)"></text>
						</view>
						<!--评论的删除按钮结束-->
					</view>	
				</view>		
				<!--评论的评论开始界面-->
			
				<view class="u-border-bottom u-m-l-50 u-p-l-20 u-p-r-20" style = "background-color: #f3f3f3;" v-if="item.RepliesDetails != null">
					<view v-for="(item1,index) in item.RepliesDetails">
						<view  class="detail-comment_item u-flex u-col-top" >
							<!--评论的评论的姓名开始-->												
							<view class="nowrap" style= "display : flex" >										
								<view class="u-font-28" style="color: #12abda;" v-if="item1.Lev ==0"  @click="go2User(item1.AddAcc)">{{item1.UserName}}&nbsp;&nbsp;：																											
								</view>
								<view class="u-font-28"  style="color: #12abda;" v-if="item1.Lev == 1" @click="go2User(item1.ReplyId)">
								{{item1.UserName}}&nbsp;
								<u-icon name="play-right-fill" size="20" color="#8f9696" class="u-m-l-10 u-m-r-10"></u-icon> 
								&nbsp;
								{{item1.ReplyName}}
								：
								</view>
							</view>									
							<!--评论的评论的姓名结束-->
							<view>
								<!--评论的内容开始-->	
								<rich-text class="item-content_text u-font-28" :nodes="item1.Content"></rich-text>
								<!--评论的内容结束-->	
								<!--评论的视频开始-->
								<view class="article-video" v-if="item1.VodSrc != ''" @click.stop="actVideoPlay(index, item1.VodSrc)">
									<image class="article-video_img" mode="aspectFit" :src="item1.VodImg"></image>
									<view class="article-video_play" v-if="!isPlay">
										<image class="article-video_play--icon" src="/static/images/home/play.png" mode="scaleToFill" />
									</view>
								</view>
								<!--评论的视频结束-->
								<!--评论的图片开始-->
								<view class="article-images" v-if="item1.ImgPackJson != ''">
									<template v-for="(img, index) in item1.ImgPackJson">
										<u-image class="u-m-r-10" width="100" :src="img.Src" mode="widthFix" @click="actPreviewImage(item1.ImgPackJson,index)"></u-image>
									</template>
								</view>
								<!--评论的图片结束-->
								<!--评论的文件开始-->
								<view class="article-annex" v-if="item.AttPackJson != ''">
									<template v-for="(item2,index2) in item.AttPackJson">
										<preview-pdf :item="item2" :index="index2"></preview-pdf>
									</template>
								</view>
								<!--评论的文件结束-->
								<text class="article-content_friends" v-if="item1.FriendAccName">{{item.FriendAccName}}</text>
							</view>
						</view>
						<view class="article-handle u-flex" style="margin-top: 5rpx;">
							<!--评论的日期开始-->
							<view class="item-content-time">{{item1.AddTimeText}}</view>	
							<!--评论的日期结束-->
							<!--评论的评论按钮开始-->
							<view class="article-handle_item u-flex u-row-center" style="margin-left: 14rpx" @click.stop="actArticleComment(item1.Topic,item1.Rid)">
								<text class="icon icon-pinglun article-handle_item--icon"></text>
								<text class="article-handle_item--text">{{item1.Replies}}</text>
							</view>		
							<!--评论的评论按钮结束-->	
							<!--评论的删除按钮开始-->
							<view class="item-content_header--right" v-if="item1.AddAcc == $store.state.vuex_user.uid" style="margin-left: 14rpx">
									<text class="icon icon-shanchu article-handle_item--icon" @click="actDeleteReplyShow(item1.Rid)"></text>
							</view>
							<!--评论的删除按钮结束-->
						</view>						
					</view>
				</view>
				</template>
			<!--评论的内容结束-->
		</view>
		<!--评论的界面显示结束-->
		<view class="detail-comment_footer" v-if="info.IsAuthor == 1 && from == 'mine'">
			<u-button size="mini" @click="deleteShow = true">{{$t('mine.btn_del_post')}}</u-button>
			<!-- 	<u-button size="mini" type="primary" plain @click="$goPage('/article/publish', {}, true)">{{i18n.bbs_repost}}</u-button> -->
		</view>
		<u-modal v-model="deleteShow" :show-cancel-button="true" :show-title="false" :cancelText="$t('mine.btn_cancel')"
			:confirmText="$t('mine.btn_confirm')" :content="$t('mine.bbs_confirm_del_post')" @confirm="actDelete(info.Tid)">
		</u-modal>
		<u-modal v-model="deleteReplyShow" :show-cancel-button="true" :show-title="false" :cancelText="$t('mine.btn_cancel')"
			:confirmText="$t('mine.btn_confirm')" :content="$t('mine.bbs_confirm_del_reply')" @confirm="actDeleteReply()"></u-modal>
		<u-popup v-model="isComment" mode="bottom" :safe-area-inset-bottom="true">
			<view class="comment-box">
				<u-avatar :src="vuex_user.avatar"></u-avatar>
				<view class="inputStyle">
					<textarea v-model="form.Content" placeholder-style="color:#999" :placeholder="$t('mine.comment_tips')"
						@input="commentInput" @focus="textFocus"/>
				</view>
				<button class="comBtnStyle" @click="isCommonTerms = true">{{$t('mine.common_terms')}}</button>
				<image class="TUI-icon" @click="actEmojiShow()" src="/static/static/assets/face-emoji.svg"></image>
				<button class="btnStyle" :disabled="isSend" @click="submit">{{$t('mine.bbs_post')}}</button> 
				<view v-if="emojiShow" class="TUI-Emoji-area">
					<TUI-Emoji @enterEmoji="appendMessage"></TUI-Emoji>
				</view>
			</view>
		</u-popup>
		 <u-popup v-model="isCommonTerms" mode="top" :mask="false">
			<view class="tui-common-words-container">
				<view class="tui-common-words-box">
					<view class="tui-common-words-title">
						<view>{{$t('mine.select_common_terms')}}</view>
						<view style="color: #006EFF; font-family: PingFangSC-Regular;" class="tui-common-words-close"
							@tap="isCommonTerms = false">{{$t('mine.common_close')}}</view>
					</view>
					<scroll-view class="tui-common-words-list" scroll-y="true" enable-flex="true">
						<view v-for="(item, index) in commonWordsList" :key="index" class="tui-common-words-item"
							@tap="checkCommonWord" :data-words="item.Title">{{item.Title}}</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>

		<!-- 投诉 -->
		<view class="more-action" v-if="isMore">
			<view class="more-action_item" @click="deleteShow = true" v-if="info.IsAuthor == 1">{{$t('mine.btn_del_post')}}
			</view>
			<view class="more-action_item" @click="actShare(info)">{{$t('mine.share')}}</view>
			<view class="more-action_item" @click="$goPage('/user/complaints')">{{$t('home.btn_report')}}</view>
		</view>
	</view>
</template>

<script>
	import uniShare from '@/components/uni-share/js_sdk/uni-share.js';
	import TUIEmoji from "@/components/tui-chat/message-elements/emoji/index";
	import {
		emojiName,
		emojiUrl,
		emojiMap
	} from "@/components/base/emojiMap";
	import imagesItem from '@/components/images-item/index.vue';
	import replyImagesItem from '@/components/reply-images-item/index.vue';
	import articleItem from "@/components/article-item/index.vue";
	import pageMixin from '@/utils/pageMixin';
	import previewPdf from '@/components/preview-pdf/index.vue';
	import { getDate } from '@/utils/date.js'
	export default {
		mixins: [pageMixin],
		data() {
			return {
				tid: '',
				info: {},
				replies: [],
				status: 'nomore',
				iconType: 'flower',
				loadText: {
					loadmore: this.$t('mine.pull_up'),
					loading: this.$t('mine.loading'),
					nomore: this.$t('mine.note_no_more'),
				},
				emojiShow: false,
				isComment: false,
				isCommonTerms: false,
				isSend: true,
				deleteShow: false,
				deleteReplyId: 0,
				deleteReplyShow: false,
				form: {
					tid: '',
					comment: '',
				},
				from: '',
				isMore: false,
				isPlay: false,
				words: '',
				commonWordsList: [],

				videoIdx: 0,
				vodSrc: '',
				replyIdx:0
			}
		},

		onLoad(opts) {
			this.from = opts.from || '';
			this.tid = opts.tid || '';
			console.log(this.$t('mine.bbs_post'))
			uni.setNavigationBarTitle({
				title: this.$t('mine.topic_desc')
			})
			this.replyIdx = opts.idx||0;
			this.getTopicInfo();
		},
		onShow() {
		},
		onNavigationBarButtonTap(e) {
			if (e.text == 'back' && !this.publishButoonDisable) {
				uni.navigateBack({
		
				})
			}
			if (e.type == 'menu' && !this.publishButoonDisable) {
				this.isMore = !this.isMore;
			}
		},
		components: {
			replyImagesItem,
			articleItem,
			imagesItem,
			previewPdf
		},
		computed: {
			i18n() {
				return this.$t('mine')
			},
			project() {
				return this.$t('project')
			}
		},
		methods: {
			actVideoPlay(index, src) {
				let that = this;
				that.videoContext = uni.createVideoContext('video' + index, that);
				that.videoIdx = index;
				that.vodSrc = src;
				that.isPlay = true;
				setTimeout(function () {
					that.videoContext.requestFullScreen({
						direction: '0'
					});
				}, 200);
				that.autoplay = true;
			},

			fullscreenchange(e) {
				if (!e.detail.fullScreen) {
					this.isPlay = false;
				}
			},
      colseVideoPlay() {
        this.isPlay = false;
      },
			//评论输入框聚焦的时候触发
			textFocus(e) {
				console.log(e)
			},
			/*actVideoPlay(index, src) {

			  let that = this;
			  that.videoContext = uni.createVideoContext('video' + index, that);
			  that.videoIdx = index;
			  that.vodSrc = src;
			  that.isPlay = true;
			  setTimeout(function () {
			    that.videoContext.requestFullScreen({
			      direction: '0'
			    });
			  }, 200);
			  that.autoplay = true;
			  alert(index)
			  alert(src)
			},
			fullscreenchange(e) {
			  let that = this;
			  if (!e.detail.fullScreen) {
			    this.isPlay = false;
			    this.autoplay = false;
			  }
			},*/
			cancelModal() {
				this.isMore = false;
			},
			getTopicInfo() {
				this.$http.get('/bbs/topic/info', {
					tid: this.tid
				}).then(res => {
					this.info = res.info,
						this.replies = res.replies
						console.log(this.info)
				})
			},
			handleShare(title, orgContent, Content, media, callback) {
				uniShare({
					content: { //公共的分享参数配置  类型（type）、链接（herf）、标题（title）、summary（描述）、imageUrl（缩略图）
						type: 0,
						href: 'https://tapi.i-dock.net/h5/guide/index',
						title: title,
						summary: Content,
						imageUrl: 'https://tpc.i-dock.net/images/guide/logo.png'
					},
					menus: [{
							"img": "/static/app-plus/sharemenu/wechatfriend.png",
							"text": this.$t('mine.wx_friend'),
							"share": { //当前项的分享参数配置。可覆盖公共的配置如下：分享到微信小程序，配置了type=5
								"provider": "weixin",
								"scene": "WXSceneSession"
							}
						},
						{
							"img": "/static/app-plus/sharemenu/wechatmoments.png",
							"text": this.$t('mine.wx_circleFriends'),
							"share": {
								"provider": "weixin",
								"scene": "WXSenceTimeline"
							}
						},
					],
					cancelText: this.$t('mine.cancel_share'),
				}, e => { //callback
					if (e.code == -8) {
						uni.showToast({
							title: this.$t('mine.client_uninstall'),
							icon: 'none',
							mask: true
						})
					} else {
						//做分享数量统计
						callback();
					}
				})
			},
			getDate,
			actShare(value) {
				console.log(value)
				var that = this;
				//检查用户信息是否存在/是否登录
				if (JSON.stringify(that.vuex_user) == '{}') {
					uni.reLaunch({
						url: '/pages/login/index'
					});
					return;
				}
				var Content = value.Content;
				var orgContent = value.Content;
				var media = "";
				var title = this.vuex_user.uname + '给您分享了一个帖子';

				//回调分享数加1
				var callback = function() {
					that.$http.post('/bbs/topic/shares', {
						tid: value.Tid
					}).then(res => {});
				};
				if (value.ImgPackJson != null) {
					Content += "[图片]";
					uni.showLoading();
					// uni.downloadFile({
					// 	url: value.ImgPackJson[0].Src,
					// 	success: (res) => {
					// 			if(res.statusCode == 200){
					// that.handleShare(title,orgContent,Content,res.tempFilePath);
					that.handleShare(title, orgContent, Content, "", callback);
					uni.hideLoading();
					// 		}
					// 	},
					// })
				} else if (value.VodSrc != "") {
					Content += "[视频]";
					uni.showLoading();
					// 　uni.downloadFile({
					// 	url: value.VodImg,
					// 	success: (res) => {
					// 			if(res.statusCode == 200){
					// that.handleShare(title,orgContent,Content,res.tempFilePath);
					that.handleShare(title, orgContent, Content, "", callback);
					uni.hideLoading();
					// 		}
					// 	},
					// })

				} else {
					that.handleShare(title, orgContent, Content, '', callback)
				}
			},
			getCommonWordsList() {
				this.$http.get('/cms/info/list', {
					cid: 311
				}).then(res => {
					this.commonWordsList = res;
				});
			},
			checkCommonWord(e) {
				this.form.content = e.currentTarget.dataset.words || '';
				this.isCommonTerms = false;
				this.isSend = false;
			},
			actArticleComment(tid,rid) {
				if(rid === 'undefined'){
					rid = 0
				}
				this.$store.commit('checkUserLogin');
				let article = this.$refs['article-item'];
				article.actComment(tid,rid,this.replyIdx);
			},
			actComment(tid,rid) {
				// alert(res.Topic);
				this.isComment = true;
				this.isSend = true;
				this.form = {
					tid: tid,
					rid: rid,
					content: ''
				}
				this.getCommonWordsList();
			},
			commentInput(e) {
				var val = e.detail.value;
				if (val == '') {
					this.isSend = true;
				} else {
					this.isSend = false;
				}
			},
			actEmojiShow() {
				if (this.emojiShow) {
					this.emojiShow = false;
				} else {
					this.emojiShow = true;
				}
			},
			appendMessage(e) {
				if(this.form.Content !== undefined){
					this.form.Content = this.form.Content.slice(0,this.cursorStart) + e.detail.message + this.form.Content.slice(this.cursorStart);
				}else{
					this.$set(this.form,'Content',e.detail.message)
				}
				this.isSend = false;
			},
			actDelete(tid) {
				let that = this;
				that.$http.post('/bbs/topic/delete', {
					tid: tid,
					client: 1
				}).then(res => {
					uni.showToast({
						title: this.$t('mine.del_success')
					});
					that.deleteShow = false;
					uni.redirectTo({
						url: '/pages/article/index?type=mine'
					});
				})

			},
			actDeleteReplyShow(rid) {
				this.deleteReplyShow = true;
				this.deleteReplyId = rid;
			},
			actDeleteReply() {
				let that = this;
				if (that.deleteReplyId > 0) {
					that.$http.post('/bbs/topic/reply/delete', {
						tid: that.tid,
						rid: that.deleteReplyId
					}).then(res => {
						uni.showToast({
							title: this.$t('mine.del_success')
						});
						that.deleteReplyShow = false;
						that.getTopicInfo();
					})
				}
			},
			submit() {
				let that = this;
				//解析回复内容拼重新拼接回复内容
				let comment = '';
				let content = that.parseText(that.form.Content);
				for (let i = 0; i < content.length; i++) {
					if (content[i].name == 'img') {
						comment += '<img style="width:20px;height:20px;display: inline-block;vertical-align:text-bottom;" +src="' + content[i].src + '"></img>';
					} else if (content[i].name == 'span') {
						comment += content[i].text;
					}
				}
				that.form.comment = comment;
        console.log('that.form-------------------'+that.form)
				that.$http.post('/bbs/topic/reply', that.form).then(res => {
					that.isComment = false;
					that.form = {
						content: ''
					}
					uni.showToast({
						title: this.$t('mine.pub_success')
					});
					setTimeout(function() {
						that.getTopicInfo();
					}, 1000)
				})

			},
			go2User(uid) {
				if (uid > 1) {
					uni.navigateTo({
						url: '/pages/user/index?uid=' + uid
					});
				}
			},
			parseText(content) {
				let renderDom = [];
				let temp = content;
				let left = -1;
				let right = -1;

				while (temp !== '') {
					left = temp.indexOf('[');
					right = temp.indexOf(']');

					switch (left) {
						case 0:
							if (right === -1) {
								renderDom.push({
									name: 'span',
									text: temp
								});
								temp = '';
							} else {
								const _emoji = temp.slice(0, right + 1);

								if (emojiMap[_emoji]) {
									renderDom.push({
										name: 'img',
										src: emojiUrl + emojiMap[_emoji]
									});
									temp = temp.substring(right + 1);
								} else {
									renderDom.push({
										name: 'span',
										text: '['
									});
									temp = temp.slice(1);
								}
							}

							break;

						case -1:
							renderDom.push({
								name: 'span',
								text: temp
							});
							temp = '';
							break;

						default:
							renderDom.push({
								name: 'span',
								text: temp.slice(0, left)
							});
							temp = temp.substring(left);
							break;
					}
				}

				return renderDom;
			},
			//大图预览图片
			actPreviewImage(imgPackJson, index) {
				let urls = [];
				imgPackJson.forEach(function(item) {
					urls = urls.concat(item.Src);
				});
				// 预览图片
				uni.previewImage({
					urls: urls,
					current: index,
					indicator: 'default',
					longPressActions: {
						itemList: ['保存图片'],
						success: function(data) {
							uni.showLoading({  
									title:"保存中..."  
							})  
							setTimeout(function() {   
									uni.hideLoading()  
							}, 6000);  
							uni.downloadFile({  
									url: urls[data.index],//网络路径，下载下来  
									success: (data) => {  
											if (data.statusCode === 200) {  
													uni.saveImageToPhotosAlbum({  
															filePath: data.tempFilePath,//下载后的临时路径  
															success:  data => {//下载完成后在相册里压根找不到  
																	uni.hideLoading()  
																	uni.showToast({  
																			title:"保存成功！"   
																	})  
															}  
													})  
											}  
									}  
							});  	
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.detail {
		padding-bottom: 160rpx;
	}
	.nowrap {
		white-space: nowrap ;
		}
		
	.item-content-time {
		font-size: 26rpx;
		color: #b8b8b8;
	}
	.detail-comment {
		padding: 20rpx 32rpx 50rpx;
		background-color: #fff;
		overflow: hidden;
		white-space: normal;
		word-break: break-all;

		.detail-comment_header {
			height: 76rpx;
		}

		.comment-header_title--icon {
			width: 36rpx;
			height: 36rpx;
			margin-right: 6rpx;
		}

		.comment-header_title--label {
			font-size: 30rpx;
			color: #131313;
		}

		.comment-header_title--sum {
			color: #949C9E;
		}

		.comment-header_action {
			font-size: 30rpx;
			color: #0089FF;
		}

		&_item {
			padding: 18rpx 0 32rpx;

			.comment-item_avatar {
				margin-right: 12rpx;
			}

			.item-content_header {
				margin-bottom: 20rpx;
			}

			.item-content_header--name {
				font-size: 30rpx;
				color: #131313;
			}
			.item-content_header--action {
				color: #0089FF;

				.icon {
					font-size: 26rpx;
				}
			}

			.item-content_text {
				color: #5D5D5F;
				line-break: anywhere;
				white-space: pre-line;
			}
		}

		&_footer {
			z-index: 999;
			position: fixed;
			width: 100%;
			bottom: 0;
			text-align: center;
			background-color: #FFFFFF;
			border-top: 1rpx solid #EFEFEF;

			.u-btn {
				display: inline-block;
				margin: 20rpx;
			}
		}
	}

	.article-video {
		position: relative;
		margin-bottom: 30rpx;

		&_item {
			z-index: 9;
			position: absolute;
			top: 0;
			left: 10%;
			width: 80%;
			height: 100%;
		}

		&_img {
			max-width: 690rpx;
			max-height: 300rpx;
			width: auto;
		}

		&_play {
			width: 62rpx;
			height: 62rpx;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			border-radius: 5px;
			background: #505050;

			&--icon {
				width: 100%;
				height: 100%;
			}
		}
	}

	.article-images {
		display: flex;
		flex-wrap:wrap;
		clear: both;
		padding-bottom: 10rpx;

		&_item {
			margin: 10rpx;
			float: left;
		}
	}

	.publish-friends {
		padding: 0 30rpx;

		&_item {
			font-size: 28rpx;
			color: #0073DB;
		}
	}

	.comment-box {
		padding: 24rpx 24rpx 88rpx;
		background: #F3F3F3;

		.inputStyle {
			padding: 20rpx;
			background: #FFFFFF;
			border: 1rpx solid #EAEAEA;
			border-radius: 8rpx;
		}
	}

	.comBtnStyle {
		margin-top: 14rpx;
		width: 170rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		background: #2979ff;
		border-color: #2979ff;
		border-radius: 24rpx;
		float: left;
	}

	.btnStyle {
		margin-top: 14rpx;
		width: 118rpx;
		height: 60rpx;
		line-height: 60rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		background: #2979ff;
		border-color: #2979ff;
		float: right;
	}

	.more-action {
		z-index: 9999;
		position: fixed;
		right: 20rpx;
		top: 16rpx;
		padding: 20rpx 30rpx;
		background: #313131;
		border-radius: 10rpx;

		&_item {
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 2;
		}

		&::after {
			position: absolute;
			top: -15rpx;
			right: 24rpx;
			content: '';
			width: 0;
			height: 0;
			border-left: 12rpx solid transparent;
			border-right: 12rpx solid transparent;
			border-bottom: 16rpx solid #313131;
		}
	}

	.TUI-icon {
		margin-top: 14rpx;
		margin-left: 20rpx;
		width: 56rpx;
		height: 60rpx;
		line-height: 60rpx;
		float: left;
	}

	.TUI-Emoji-area {
		width: 100vw;
		height: 450rpx;
	}
</style>
